<template>
	<view class="bindPhone">
		<view class="weChatLogin">
			<view class="avatar">
				<image class="img" src="@/static/my/toux.jpg"></image>
			</view>
			<text style="font-weight: 700; margin-top: 20rpx; font-size: 30rpx">我型我发</text>
		</view>
		<view class="weChatBtn">
			<button class="btn" @click="wechatLogin">使用微信快速登录</button>
		</view>
		<view class="zbdl" @click="resetBtn">暂不登录</view>
	</view>
</template>

<script setup>
	import {
		wxLoginAuthorization
	} from '/api/login.js'
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'

	//暂不登录
	let resetBtn = () => {
		uni.navigateTo({
			url: "../login/weChantLogin"
		})
	}

	//微信登录
	let wechatLogin = (e) => {
		uni.showLoading({
			title: '登录中'
		})
		uni.login({
			provider: 'weixin', //使用微信登录
			"onlyAuthorize": true, // 微信登录仅请求授权认证
			success(res) {
				if (res.code) {
					// 获取用户信息
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							console.log('获取用户信息', infoRes.userInfo)
							let params = {
								"avatar": infoRes.userInfo.avatarUrl,
								"code": res.code,
								"nickName": infoRes.userInfo.nickName,
								"spread_spid": 0
							}

							wxLoginAuthorization(params).then(resultt => {
								uni.hideLoading()
								if (resultt.code == 200) {
									uni.setStorageSync('token', resultt.data.token)
									uni.navigateTo({
										url: "../index/index"
									})
								} else {
									uni.navigateTo({
										url: '/pages/login/weChantLogin'
									})
								}
							})
						}
					})
				} else {
					console.log('登录失败！' + res.errMsg)
				}
			}
		})
	}
  
  onMounted(() => {
    // #ifdef MP
    let token = uni.getStorageSync('token');
    if (token !== undefined && token !== null && token !== '') {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    }
    // #endif
  })
</script>

<style scoped lang="scss">
	.bindPhone {
		width: 100%;
		height: 100vh;
		padding: 40rpx;

		.weChatLogin {
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-top: 120rpx;
			align-items: center;

			.avatar {
				width: 300rpx;
				height: 300rpx;
				border-radius: 50%;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					display: block;
				}
			}
		}

		.weChatBtn {
			margin-top: 270rpx;

			.btn {
				width: 500rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin-bottom: 50rpx;
				color: #f5f5f5;
				border-radius: 30rpx;
				background-color: rgba(19, 194, 37);
			}
		}

		.zbdl {
			width: 100%;
			height: 50rpx;
			text-align: center;
		}
	}
</style>